import {
	useIntersectionObserver,
	useIntervalFn
} from '@vueuse/core'
import {
	ref,
	onUnmounted
} from 'vue'
import dayjs from 'dayjs'

export const useLazyData = apiFn => {
	const target = ref(null)
	const result = ref([])
	const {
		stop
	} = useIntersectionObserver(
		target,
		([{
			isIntersecting
		}], observerElement) => {
			if (isIntersecting) {
				stop()
				apiFn().then(data => {
					result.value = data.result
				})
			}
		}, {
			threshold: 0
		}
	)

	return {
		target,
		result
	}
}


export const usePayTime = () => {
	const time = ref(0)
	const timeText = ref('')

	const {
		pause,
		resume
	} = useIntervalFn(() => {
		time.value--
		timeText.value = dayjs.unix(time.value).format('mm分ss秒')
		if (time.value <= 0) {
			pause()
			time.value = 0
		}
	}, 1000, false)

	onUnmounted(() => {
		pause()
	})

	const start = countdown => {
		time.value = countdown
		timeText.value = dayjs.unix(time.value).format('mm分ss秒')
		resume()
	}

	return {
		start,
		timeText
	}
}
